<template>
  <div class="class_wrap_home">
    <transition name="el-fade-in">
      <div v-if="flag">
        <div class="titleList">
          <div class="class_wrap_bread">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>周报管理</el-breadcrumb-item>
              <el-breadcrumb-item>个人项目统计</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- <el-select v-model="typeId" size="small" clearable placeholder="全部职能组">
            <el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>-->

          <a-select placeholder="全部职能组" :value="typeId" style="width: 200px" @change="hasChange" allowClear>
            <a-select-option v-for="item in options" :key="item.id" :value="item.id">{{  item.name  }}</a-select-option>
          </a-select>
        </div>
        <div>
          <el-table :data="tableData" border>
            <el-table-column label="员工编号" prop="id" align="center"></el-table-column>
            <el-table-column label="姓名" prop="name" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="showDetail(scope.row)" size="mini">查看参与项目</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <showProjectDetail v-else :uid="uid" @back="back" />
    </transition>
  </div>
</template>

<script>
import { selectFunctionGroupList } from "@/service/Api.js"; // 接口
import showProjectDetail from "./showProjectDetail";
import { getStaffList } from "@/service/stageApi";
export default {
  components: {
    showProjectDetail,
  },
  name: "personalProject",
  data() {
    return {
      typeId: undefined,
      tableData: [],
      options: [],
      flag: true,
      uid: undefined,
    };
  },
  created() {
    let _id = this.$route.query.id;
    if (_id) {
      this.uid = _id;
      this.flag = false;
    }
    this.getOptions();
    // this.getTableData();
  },
  methods: {
    hasChange(val) {
      this.typeId = val;
      this.getTableData(this.typeId);
    },
    back() {
      this.flag = !this.flag;
      this.$router.replace("/weekly");
    },
    showDetail(row) {
      this.uid = row.id;
      this.flag = !this.flag;
    },
    getTableData(val) {
      getStaffList(val).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data;
          // console.log(this.tableData,745);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getOptions() {
      let userInfo = sessionStorage.getItem("userInfo");
      let id = JSON.parse(userInfo).id;
      selectFunctionGroupList(id).then((res) => {
        if (res.code == 0) {
          this.options = res.data;
          let f;
          let arr = [];
          res.data.forEach(item => {
            arr.push(item.id);
            f = arr.join(",")
          })
          let list = [
            {
              id: f,
              name: "所有职能组",
            },
          ];
          list.push(...res.data);
          this.options = list;
          this.typeId = f;
          this.getTableData(this.typeId);
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style  scoped>
.class_wrap_home {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  padding: 0px 20px;
}

.titleList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.class_wrap_bread {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>